<template>
  <div class="info-card" >
    <div class="card-header" @click="cardInfo.vierNum++">
      <el-tag type="danger"  style="margin-right:12px" v-if="info.new"> 最新 </el-tag>
      <div class="title" @click="goDetailPage(info.id, searchType)">
        <p v-html="hightLight(searchStore.searchValue,info.title)"></p>
      </div>
      <el-tag
        v-if="searchType == '1'"
        effect="dark"
        @click.stop="goPolicyPage(info)"
        class="cursor-pointer mr-3"
        >关联政策</el-tag
      >
      <el-tag
        effect="dark"
        v-if="info.orgName"
        @click="goDetailPage(info.orgId, '3')"
        >{{ info.orgName }}
      </el-tag>
      <el-tag
        effect="dark"
        v-if="info.parentOrgName"
        @click="goDetailPage(info.parentOrgId, '3')"
      >
        {{ info.parentOrgName }}
      </el-tag>
    </div>
<collapseComponent class="my-3" ref="textRef" :lines="2" style="color: #adadad;" >
    {{info.instructions}}
    </collapseComponent>
    <div class="desc" v-if="info.benefits">
      {{ info.benefits }}
    </div>
    <div
      :class="info.instructions ? '' : 'mt-3'"
      class="flex justify-between items-center"
    >
      <div class="tags">
        <el-tag effect="plain" v-if="info.year">
          {{ info.year }}
        </el-tag>
        <el-tag effect="plain">
          {{ info.area || "全国" }}
        </el-tag>
        <el-tag effect="plain" v-if="info.completeTimeStr">
          {{ info.completeTimeStr }}
        </el-tag>
        <el-tag effect="plain" v-if="info.character">
          {{ info.character }}
        </el-tag>
        <el-tag effect="plain" v-if="info.itemType">
          {{ info.itemType }}
        </el-tag>
        <el-tag effect="plain" v-if="info.status">
          {{ info.status }}
        </el-tag>
        <el-tag effect="plain" v-if="info.type">
          {{ info.type }}
        </el-tag>
        <el-tag effect="plain" v-if="info.orgType">
          {{ info.orgType }}
        </el-tag>
        <el-tag class="mr-3" effect="plain" v-if="info.proof">
          {{ info.proof }}
        </el-tag>
      </div>
    <div class="handle-icons" @click.stop>
        <div class="view icon">
          <svg-icon name="view" size="24px" />
          <span>{{ cardInfo.vierNum }}</span>
        </div>
        <div class="love icon" @click="handleIconClick('love')">
          <svg-icon
            name="love"
            size="20px"
            :color="cardInfo.isLike * 1 ? 'red' : '#bcc1cb'"
          />
          <span>{{ cardInfo.likeNum }}</span>
        </div>
        <div class="favorite icon" @click="handleIconClick('favorite')">
          <svg-icon
            name="favorite"
            size="22px"
            :color="cardInfo.isCollect * 1 ? '#f2ea57' : '#bcc1cb'"
          />
          <span>{{ cardInfo.collectNum }}</span>
        </div>
        <div
          class="share icon cursor-pointer"
          @click="handleIconClick('share')"
        >
          <svg-icon name="share" size="18px" />
          <span>分享</span>
        </div>
    </div>
    </div>

  </div>
  <!-- <div v-if="listLength%2==0" style="height:1px;width:88%;background-color:red;margin:0 32px 0 32px"></div> -->
</template>

<script setup lang="ts">
import { ref,defineProps,onMounted,defineExpose,inject,computed } from "vue";
import { useInfoCardHooks } from "./hooks"
import { hightLight  } from '@/utils/index'
import { useSearchStore } from "../../store/search";
import collapseComponent from '../.././components/index.vue'

const searchStore = useSearchStore()
const props = defineProps(["info"]);
const { cardInfo, handleIconClick, goPolicyPage, searchType, goDetailPage } =
  useInfoCardHooks(props);

defineExpose({ cardInfo });
const contentList = computed(() => props.info.map((result) => hightLight(result)));
const textRef = ref(null);
const textHeight = ref(0);
const ellipsisText = ref()
onMounted(() => {
  // 在组件挂载后获取高度
  const textElement = textRef.value;
  if (textElement) {
    textHeight.value = textElement.offsetHeight;
    // ellipsisText.value = props.info.instructions.slice(0,90)+'· · ·'
  }
});
</script>

<style scoped lang="postcss">
.info-card {
  @apply bg-white rounded-md px-8 py-6 relative;
  top: 0;
  transition: all 0.2s;
  /* width: 55%; my-3*/
  /* &:hover {
    top: -2px;
    box-shadow: 0 2px 2px 2px #ccc;
  } */
  .card-header {
    @apply flex items-center;
    width: 40vw;
    .title{
      p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis
      }
    }
  }
  .title {
    @apply font-bold cursor-pointer mr-4;
    font-size: 16px;
    transform: all 0.3s ease-in-out;
    &:hover {
      @apply text-theme-color;
    }
  }
  .desc {
    @apply my-3;
    color: #adadad;
  }
  .title,
  .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tags {
    width: 24vw;
white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .el-tag {
      margin-bottom: 5px;
      @apply mr-4 cursor-pointer;
      min-width:60px;
    }
    :deep(.el-tag__content){
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .handle-icons {
    white-space:nowrap;
    /* margin-top: 12px; */
    @apply flex justify-between items-center;
    .icon {
      @apply flex items-center;
      span {
        @apply ml-2;
      }
    }
    .love,
    .view,
    .favorite {
      @apply mr-4;
    }
  }
}
</style>
